<template>
  <div id="dialog">
    <el-dialog
      center
      title="添加成员"
      v-model="dialogVisible"
      width="30%"
      destroy-on-close
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <template v-if="step === 1">
        <el-form ref="wxForm">
          <el-form-item label="微信号">
            <el-input v-model="wxFormData"></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template v-else>
        <div class="user-info">
          <div class="avatar">
            <img
              src="http://wx.qlogo.cn/mmhead/Q3auHgzwzM4sFBUQp8h5rf7M1PLL3yP7LWUgakW8LSrZCztKUHW8SQ/0"
              alt=""
            />
          </div>
          <div class="info">
            <!-- <div class="title">阿成</div> -->
            <div class="desc">{{ wxFormData }}</div>
          </div>
        </div>
        <div class="role-title">选择角色</div>
        <div class="role-list">
          <div class="role-item" v-for="(role, index) in roleList" :key="index">
            <el-radio v-model="selectRole" :label="role.id">{{
              role.name
            }}</el-radio>
            <div class="desc">{{ role.desc }}</div>
          </div>
        </div>
        <div class="verification" v-if="getAddRoleRes.errcode == 400002">
          <div>
            <i class="el-icon-info"></i>
            <span>主播未验证，扫描下方二维码进行身份验证。</span>
          </div>
          <img
            style="width: 160px; height: 160px"
            src="https://res.wx.qq.com/op_res/9rSix1dhHfK4rR049JL0PHJ7TpOvkuZ3mE0z7Ou_Etvjf-w1J_jVX0rZqeStLfwh"
            alt=""
          />{{ userCodeUrl }}
        </div>
      </template>
      <template #footer>
        <span class="dialog-footer" v-if="step === 1">
          <el-button @click="changeVisibility(false)">取消</el-button>
          <el-button type="primary" @click="AddRole">确定</el-button>
        </span>
        <span class="dialog-footer" v-else>
          <el-button @click="step = 1">上一步</el-button>
          <el-button
            @click="AddRole, changeVisibility(false)"
            type="primary"
            :disabled="selectRole"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { getAddRole } from '@/service/main/main'
import { ElMessage } from 'element-plus'
// import { useStore } from 'vuex'
export default defineComponent({
  setup() {
    // const store = useStore() // 拿到vuex
    // 显示隐藏
    let dialogVisible = ref(false)
    const changeVisibility = (value: boolean) => {
      dialogVisible.value = value
    }

    const from = {
      value: '',
    }
    const rules = {
      value: [
        {
          required: true,
          message: '微信号不能为空',
          trigger: 'blur',
        },
      ],
    }
    const step = ref(1)
    const roleList = [
      {
        id: 1,
        name: '主播',
        desc: '可创建本人为主播的直播间并进行直播',
      },
    ]
    // 输入微信号input
    let wxFormData = ref('')

    // 请求添加用户
    let getAddRoleRes: any = null
    let userCodeUrl = ''
    const AddRole = () => {
      const reqRole = async () => {
        getAddRoleRes = await getAddRole(wxFormData.value, 2)
        if (getAddRoleRes?.errcode == 400002) {
          ElMessage.warning({
            message: '请先完成实名认证',
            type: 'warning',
          })
          userCodeUrl = getAddRoleRes.codeurl
          console.log(userCodeUrl)
        } else if (getAddRoleRes?.errcode == 400001) {
          ElMessage.warning({
            message: '用户名无效',
            type: 'warning',
          })
          return
        } else if (getAddRoleRes?.errcode == 2000) {
          ElMessage.warning({
            message: '该主播已被添加',
            type: 'warning',
          })
          return
        } else if (getAddRoleRes?.errcode == 0) {
          ElMessage.success({
            message: '添加成功',
            type: 'success',
          })
          changeVisibility(true)
        }
        step.value = 2
      }
      reqRole()
    }

    const selectRole = ref('')

    return {
      dialogVisible,
      changeVisibility,
      from,
      rules,
      step,
      roleList,
      selectRole,
      wxFormData,
      AddRole,
      getAddRoleRes,
      userCodeUrl,
    }
  },
})
</script>

<style lang="less" scoped>
.user-info {
  display: flex;

  .avatar {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 5px;
    overflow: hidden;

    img {
      width: 100%;
    }
  }

  .info {
    margin-left: 0.2rem;
    .title {
      font-size: 0.16rem;
    }
    .desc {
      font-size: 0.14rem;
      color: #999;
    }
  }
}

.role-title {
  font-weight: 800;
  margin: 0.2rem 0;
}

.role-list {
  .role-item {
    margin-bottom: 0.2rem;

    .desc {
      margin-top: 0.1rem;
      font-size: 0.12rem;
      padding-left: 0.22rem;
      color: #888;
    }
  }
}
</style>

function get() { throw new Error('Function not implemented.') } function get() {
throw new Error('Function not implemented.') }
